// easy-less插件同时生成css文件
// less中的单行注释，不会被解析到css文件中
/*less中的多行注释，会被解析到css文件中*/
.box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    .box2{
        background-color: red;
        .box4{
            background-color: sandybrown;
        }
    }
    .box3{
        background-color: seagreen;
    }
}
// 变量：在变量中可以存储任意值，在需要时任意修改变量值
// 语法:@变量名
@a:100px;
@backg:#f2f2f2;
@c:box6;
.box5{
    width: @a;
    height: @a;
    background-color: @backg;
}
// 作为类名,属性名或者一部分值使用需要以 @{变量名}形式使用
// 变量采用就近原则,并且可以在声明前使用变量
.@{c}{
    width: @a;
    height: @d;
    background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;

// 可以用$符取属性值
.div7{
    width: 300px;
    height: $width;
}